<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="zxr940203@163.com">
    <meta name="Keywords" content="login">
    <meta name="Description" content="login">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>star</title>
    <style>
        *{ margin:0; padding:0;font-family:'Microsoft yahei';}
        a{ text-decoration:none;color: white}
        a img{ display:block; border:none;}
        li{ list-style:none;}
        html{
            height: 100%;
        }
        #nav{
            position: fixed;
            top: 50%;
            left: 50px;
            transform: translateY(-50%);
            font-size: 16px;
            text-align: center;
            width: 200px;
            font-family: "新宋体";
            color: white;
            background-color: rgba(0,0,0,0.5);
            -webkit-border-radius: 15px ;
            -moz-border-radius: 15px;
            border-radius: 15px;
            /*border: 1px solid orchid;*/
            -webkit-box-shadow: 0 0 4px #5B7689;
            -moz-box-shadow: 0 0 4px #5B7689;
            box-shadow:  0 0 4px #5B7689;
            overflow: hidden;
            cursor: pointer;
            z-index:88 ;
        }
        #nav ul{
            width:200px;
        }
        #nav ul li{
            position: relative;
            height: 35px;
            line-height: 35px;
            text-align: center;
            /*border-bottom: 1px solid #ddd;*/
            margin-bottom: 10px;
        }
        #nav ul li a{
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        #nav ul li:hover a{
            color: pink;
            margin-left: -10px;
            font-size: 18px;
        }
        #nav ul li:hover:before{
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            content: "";
            display: block;
            width: 0;
            height: 0;
            border:6px solid transparent;
            border-top-color: #358030;
        }
        #welcome{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 0;
            height: 80px;
            font-size: 24px;
            line-height: 80px;
            /*font-style: italic;*/
            text-align: center;
            font-family: "新宋体";
            color: white;
            background-color: rgba(0,0,0,0.5);
            -webkit-border-radius: 15px ;
            -moz-border-radius: 15px;
            border-radius: 15px;
            /*border: 1px solid orchid;*/
            -webkit-box-shadow: 0 0 4px #5B7689;
            -moz-box-shadow: 0 0 4px #5B7689;
            box-shadow:  0 0 4px #5B7689;
            overflow: hidden;
            cursor: pointer;
            z-index:88 ;
        }
        #welcome .top{
            height:3px;
            width:0;
            position:absolute;
            top:0;
            right:0;
            background:#fff;
        }
        #welcome .bottom{
            height:3px;
            width:0;
            position:absolute;
            bottom:0;
            left:0;
            background:#fff;
        }
        #welcome .left{
            height:0;
            width:3px;
            position:absolute;
            top:0;
            left:0;
            background: #fff;
        }
        #welcome .right{
            position: absolute;
            top: 0;
            right: 0;
            width: 3px;
            height: 0;
            background-color: #fff;
        }
        #welcome .cli{
            /*display: none;*/
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            border: 1px solid white;
            background-color: transparent;
            color: white;
            font-size: 14px;
            width: 50px;
            height: 20px;
            line-height: 20px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
        #canvas{
            display:block;
            background:#000;
        }
    </style>
</head>
<body>
<audio loop="loop" autoplay="autoplay" hidden="hidden">
    <source src="http://nos.netease.com/house-public/dab7176b0f30bbaa5222d0d89b6d7d6c.mp3"/>
</audio>
<div id="welcome">
    欢迎来到网易房产
    <div class="top"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="bottom"></div>
    <div class="cli">请点击</div>
</div>
<div id="nav">
    <ul>
        <li>
            <a href="https://newcms.ws.netease.com/index.html" target="_blank">网易发布系统</a>
        </li>
        <li>
            <a href="https://active.ws.netease.com/console/login" target="_blank">网易互动系统</a>
        </li>
        <li>
            <a href="http://game.house.163.com/wa/admin/login" target="_blank">网易房产游戏上传</a>
        </li>
        <li>
            <a href="http://pclocal.ms.netease.com" target="_blank">PC广告投放系统</a>
        </li>
        <li>
            <a href="http://local.ms.netease.com/" target="_blank">移动端广告投放系统</a>
        </li>
    </ul>
</div>
<canvas id="canvas"></canvas>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="http://nos.netease.com/house-public/bf5b81484f381722b438b370e32f0f0b.js"></script>
<!--<script>-->
    <!--let $wel = $("#welcome");-->
    <!--let $cli =$wel.find(".cli");-->
    <!--let $nav = $("#nav");-->
    <!--$(function () {-->
        <!--$cli.hide();-->
        <!--$nav.hide().fadeIn("slow");-->
        <!--$wel.stop().delay(300).animate({width:"510px"},3800).click(function () {-->
            <!--window.location.href = "http://nj.house.163.com/";-->
        <!--});-->
        <!--$wel.hover(function(){-->
            <!--$cli.fadeIn();-->
            <!--let ww = $wel.width();-->
            <!--let wh = $wel.height();-->
            <!--$(this).css({color:"pink",fontSize:"28px"});-->
            <!--$(this).find('.top').stop(true).delay(300).animate({width:ww},300);-->
            <!--$(this).find('.bottom').stop(true).delay(300).animate({width:ww},300);-->
            <!--$(this).find('.left').stop(true).animate({height:wh},300);-->
            <!--$(this).find('.right').stop(true).animate({height:wh},300);-->
        <!--},function(){-->
            <!--$cli.slideUp();-->
            <!--$(this).css({color:"white",fontSize:"24px"});-->
            <!--$(this).find('.top').stop(true).animate({width:0},300);-->
            <!--$(this).find('.bottom').stop(true).animate({width:0},300);-->
            <!--$(this).find('.left').stop(true).delay(200).animate({height:0},300);-->
            <!--$(this).find('.right').stop(true).delay(200).animate({height:0},300);-->
        <!--});-->
    <!--});-->
    <!--let $can = $("#canvas");-->
    <!--let cxt = $can[0].getContext("2d");-->
    <!--let w = $can.width(window.innerWidth);-->
    <!--let h = $can.height(window.innerHeight);-->
    <!--let num = 200;-->
    <!--let data = [];-->
    <!--let move = {};-->
    <!--init();-->
    <!--function init() {-->
        <!--data = [];-->
        <!--move = {};-->
        <!--w = $can[0].width = window.innerWidth;-->
        <!--h = $can[0].height = window.innerHeight;-->
        <!--for (let i = 0;i<num;i++){-->
            <!--data[i] = {x:Math.random()*w, y:Math.random()*h, cX:Math.random()*0.6-0.3, cY:Math.random()*0.6-0.3};-->
            <!--Cricle(data[i].x,data[i].y);-->
        <!--}-->
    <!--}-->
    <!--$(document).mousemove(function (e) {-->
        <!--// e = e || window.event;-->
        <!--move.x = e.clientX;-->
        <!--move.y = e.clientY;-->
    <!--});-->
    <!--+function draw() {-->
        <!--cxt.clearRect(0,0,w,h);-->
    <!--}();-->
    <!--// var can = document.getElementById('canvas');-->
    <!--// var cxt = can.getContext('2d');-->

    <!--// var w = can.width = window.innerWidth;-->
    <!--// var h = can.height = window.innerHeight;-->

    <!--// var num = 200;-->
    <!--// var data = [];-->
    <!--// var move = {};-->
    <!--// init();-->
    <!--// window.onresize = init;-->
    <!--// function init(){-->
    <!--//     data = [];-->
    <!--//     move = {};-->
    <!--//     w = can.width = window.innerWidth;-->
    <!--//     h = can.height = window.innerHeight;-->
    <!--//     for ( var i=0;i<num;i++ )-->
    <!--//     {-->
    <!--//         data[i] = {x:Math.random()*w , y:Math.random()*h , cX:Math.random()*0.6-0.3 , cY:Math.random()*0.6-0.3 };-->
    <!--//         Cricle(data[i].x,data[i].y);-->
    <!--//     }-->
    <!--// }-->
    <!--// document.onmousemove = function(e){-->
    <!--//     move.x = e.clientX;-->
    <!--//     move.y = e.clientY;-->
    <!--// };-->
    <!--!function draw(){-->
        <!--cxt.clearRect(0,0,w,h);-->

        <!--for ( var i=0;i<num;i++ )-->
        <!--{-->
            <!--data[i].x += data[i].cX;-->
            <!--data[i].y += data[i].cY;-->
            <!--if ( data[i].x > w || data[i].x < 0 )data[i].cX = -data[i].cX;-->
            <!--if ( data[i].y > h || data[i].y < 0 )data[i].cY = -data[i].cY;-->
            <!--Cricle(data[i].x,data[i].y);-->

            <!--for ( var j=i+1;j<num;j++ )-->
            <!--{-->
                <!--if ( (data[i].x-data[j].x)*(data[i].x-data[j].x) + (data[i].y-data[j].y)*(data[i].y-data[j].y) <= 50*50 )-->
                <!--{-->
                    <!--line(data[i].x , data[i].y , data[j].x , data[j].y , false);-->
                <!--}-->
            <!--}-->
            <!--if ( move.x )-->
            <!--{-->
                <!--if ( (data[i].x-move.x)*(data[i].x-move.x) + (data[i].y-move.y)*(data[i].y-move.y) <= 100*100 )-->
                <!--{-->
                    <!--line(data[i].x , data[i].y , move.x , move.y , true);-->
                <!--}-->
            <!--}-->
        <!--}-->
        <!--window.requestAnimationFrame( draw );-->
    <!--}();-->

    <!--function line(x1,y1,x2,y2,isMove){-->
        <!--cxt.save();-->
        <!--let lin = cxt.createLinearGradient(x1,y1,x2,y2);-->
        <!--if ( !isMove )-->
        <!--{-->
            <!--lin.addColorStop(0,'#fff');-->
            <!--lin.addColorStop(1,'#333');-->
        <!--}else{-->
            <!--lin.addColorStop(0,'#fff');-->
            <!--lin.addColorStop(1,'#0bd2dd');-->
        <!--}-->
        <!--cxt.strokeStyle = lin;-->
        <!--cxt.beginPath();-->
        <!--cxt.moveTo(x1,y1);-->
        <!--cxt.lineTo(x2,y2);-->
        <!--cxt.stroke();-->
        <!--cxt.restore();-->
    <!--}-->

    <!--function Cricle(x,y){-->
        <!--cxt.save();-->
        <!--cxt.fillStyle = 'pink';-->
        <!--cxt.beginPath();-->
        <!--cxt.arc(x,y,0.5,0,2*Math.PI,true);-->
        <!--cxt.closePath();-->
        <!--cxt.fill();-->
        <!--cxt.restore();-->
    <!--}-->
<!--</script>-->
</html>